(function($) {
	"use strict";
	$.fn.bindResize = function(options) {
		var options = options || {};
		setTimeout(function() {
			var parentPos = $(this).css("position");
			if (parentPos == "static") {
				$(this).css("position", "relative");
			}
			initUI.call(this, true, options);
			initEvents.call(this);
			return this;
		}.bind(this), options["delay"] ? options["delay"] : 0);
	};
	
	function initUI(first, options) {
		if (first) {
			var backColor = options["borderColor"] || "rgb(164,190,217)";
			var opacity = options["opacity"] == null ? true :options["opacity"];
			this.__resizeObjs = {};
			this.__resizeObjs.options = options;
			this.__resizeObjs.minHeight = options.minHeight || 3;
			this.__resizeObjs.minWidth = options.minWidth || 3;
			var pointCss = {
					background:backColor,
					opacity :opacity == true? 0 :100
			};
			this.__resizeObjs.childs = $(this).children();
			this.__resizeObjs["topDiv"] = $("<div></div>").appendTo(this).css({background:backColor});
			this.__resizeObjs["leftDiv"] = $("<div></div>").appendTo(this).css({background:backColor});
			this.__resizeObjs["rightDiv"] = $("<div></div>").appendTo(this).css({background:backColor});
			this.__resizeObjs["bottomDiv"] = $("<div></div>").appendTo(this).css({background:backColor});
			this.__resizeObjs["leftTopDiv"] = $("<div/>").appendTo(this).css(pointCss);
			this.__resizeObjs["leftBottomDiv"] = $("<div/>").appendTo(this).css(pointCss);
			this.__resizeObjs["rightTopDiv"] = $("<div/>").appendTo(this).css(pointCss);
			this.__resizeObjs["rightBottomDiv"] = $("<div/>").appendTo(this).css(pointCss);

		}
		var height = $(this).height(), width = $(this).width();
		cssText.top.width = cssText.bottom.width = width + "px";
		cssText.left.height = cssText.right.height = height + "px";
		var offset = $(this).offset();
		cssText.top.top = (-1) + "px";
		cssText.top.left = (1) + "px";
		cssText.left.top = (1) + "px";
		cssText.left.left = (-1) + "px";
		cssText.right.top = (1) + "px";
		cssText.right.left = (width) + "px";
		cssText.bottom.top = (height) + "px";
		cssText.bottom.left = (1) + "px";
		cssText.leftTop.left = (-5) + "px";
		cssText.leftTop.top = (-5) + "px";
		cssText.leftBottom.left = (-5) + "px";
		cssText.leftBottom.top = (-5 + height) + "px";
		cssText.rightTop.top = (-5) + "px";
		cssText.rightTop.left = (width-5) + "px";
		cssText.rightBottom.left = (-5+width) + "px";
		cssText.rightBottom.top = (-5 + height) + "px";
		this.__resizeObjs["topDiv"].css(cssText.top);
		this.__resizeObjs["leftDiv"].css(cssText.left);
		this.__resizeObjs["rightDiv"].css(cssText.right);
		this.__resizeObjs["bottomDiv"].css(cssText.bottom);
		this.__resizeObjs["leftTopDiv"].css(cssText.leftTop);
		this.__resizeObjs["leftBottomDiv"].css(cssText.leftBottom);
		this.__resizeObjs["rightTopDiv"].css(cssText.rightTop);
		this.__resizeObjs["rightBottomDiv"].css(cssText.rightBottom);
		if(!first){
			if(typeof this.__resizeObjs.options["callback"] == "function"){
				this.__resizeObjs.options["callback"]();
			}
		}
	}
	
	var cssText  = {
			top : {
				position : "absolute",
				height : "2px",
				cursor : "n-resize"
			},
			left : {
				position : "absolute",
				width : "2px",
				cursor : "w-resize"
			},
			right : {
				position : "absolute",
				width : "2px",
				cursor : "e-resize"
			},
			bottom : {
				position : "absolute",
				height : "2px",
				cursor : "s-resize"
			},
			leftTop : {
				position : "absolute",
				height : "10px",
				width : "10px",
				cursor : "nw-resize"
			},
			leftBottom : {
				position : "absolute",
				height : "10px",
				width : "10px",
				cursor : "sw-resize"
			},
			rightTop : {
				position : "absolute",
				height : "10px",
				width : "10px",
				cursor : "ne-resize"
			},
			rightBottom : {
				position : "absolute",
				height : "10px",
				width : "10px",
				cursor : "se-resize"
			},

		};

	var topDiv = {
		mousedown : function(evt) {
			$(document.body).bind("mousemove.topDiv",
					topDiv.mousemove.bind(this));
			var offset = this.offset();
			this.__resizeObjs.orgincss = {
				top : offset.top,
				left : offset.left,
				height : this.height(),
				width : this.width()
			};
			this.__resizeObjs["leftTopDiv"].hide();
			this.__resizeObjs["rightTopDiv"].hide();
			this.__resizeObjs["topDiv"].bind("mouseup.topDiv", topDiv.mouseup
					.bind(this));
			evt.preventDefault();// 可以阻止默认事件，比如默认拖动等等，这里阻止了，后面的事件就阻止了
		},
		mousemove : function(evt) {
			var top = this.__resizeObjs.orgincss.top;
			var height = this.__resizeObjs.orgincss.height;
			if (evt.pageY >= (height + top - this.__resizeObjs.minHeight)) {
				topDiv.mouseup.call(this,evt);
				return;
			}
			this.__resizeObjs["topDiv"].css("top", (evt.pageY - top) + "px");

			this.__resizeObjs["leftDiv"].css({
				top : (evt.pageY - top) + "px",
				height : (height + top - evt.pageY) + "px"
			});
			this.__resizeObjs["rightDiv"].css({
				top : (evt.pageY - top) + "px",
				height : (height + top - evt.pageY) + "px"
			});
		},
		mouseup : function(evt) {
			$(document.body).unbind(".topDiv");
			this.__resizeObjs["topDiv"].unbind("mouseup");
			var top = $(this).offset().top;
			var height = $(this).height();
			var clientTop = evt.pageY;
			if (top == clientTop) {
				// initUI.call(this, false);
				return;
			}
			var gap = top - clientTop;
			top = top - gap;
			var newHeight = height + gap;
			$(this).css({
				top : top + "px",
				height : newHeight + "px"
			});
			this.__resizeObjs["leftTopDiv"].show();
			this.__resizeObjs["rightTopDiv"].show();
			initUI.call(this, false);
		}
	};

	var leftDiv = {
		mousedown : function(evt) {
			$(document.body).bind("mousemove.leftDiv",
					leftDiv.mousemove.bind(this));
			var offset = this.offset();
			this.__resizeObjs.orgincss = {
				top : offset.top,
				left : offset.left,
				height : this.height(),
				width : this.width()
			};
			this.__resizeObjs["leftTopDiv"].hide();
			this.__resizeObjs["leftBottomDiv"].hide();
			this.__resizeObjs["leftDiv"].bind("mouseup.leftDiv",
					leftDiv.mouseup.bind(this));
			evt.preventDefault();
		},
		mousemove : function(evt) {
			var left = this.__resizeObjs.orgincss.left;
			var width = this.__resizeObjs.orgincss.width;
			if (evt.pageX >= (width + left - this.__resizeObjs.minWidth)) {
				leftDiv.mouseup.call(this,evt);
				return;
			}
			this.__resizeObjs["leftDiv"].css("left", (evt.pageX - left) + "px");

			this.__resizeObjs["topDiv"].css({
				left : (evt.pageX - left) + "px",
				width : (width + left - evt.pageX) + "px"
			});
			this.__resizeObjs["bottomDiv"].css({
				left : (evt.pageX - left) + "px",
				width : (width + left - evt.pageX) + "px"
			});
		},
		mouseup : function(evt) {
			$(document.body).unbind(".leftDiv");
			this.__resizeObjs["leftDiv"].unbind("mouseup");
			var left = $(this).offset().left;
			var width = $(this).width();
			var clientLeft = evt.pageX;
			if (left == clientLeft) {
				return;
			}
			var gap = left - clientLeft;
			left = left - gap;
			var newWidth = width + gap;
			$(this).css({
				left : left + "px",
				width : newWidth + "px"
			});
			this.__resizeObjs["leftTopDiv"].show();
			this.__resizeObjs["leftBottomDiv"].show();
			initUI.call(this, false);
		}
	};

	var rightDiv = {
		mousedown : function(evt) {
			$(document.body).bind("mousemove.rightDiv",
					rightDiv.mousemove.bind(this));
			var offset = this.offset();
			this.__resizeObjs.orgincss = {
				top : offset.top,
				left : offset.left,
				height : this.height(),
				width : this.width()
			};
			this.__resizeObjs["rightTopDiv"].hide();
			this.__resizeObjs["rightBottomDiv"].hide();
			this.__resizeObjs["rightDiv"].bind("mouseup.rightDiv",
					rightDiv.mouseup.bind(this));
			evt.preventDefault();
		},
		mousemove : function(evt) {
			var left = this.__resizeObjs.orgincss.left;
			var width = this.__resizeObjs.orgincss.width;
			if (evt.pageX <= (left + this.__resizeObjs.minWidth)) {
				rightDiv.mouseup.call(this,evt);
				return;
			}

			this.__resizeObjs["rightDiv"]
					.css("left", (evt.pageX - left) + "px");

			this.__resizeObjs["topDiv"].css({
				width : (evt.pageX - left) + "px"
			});
			this.__resizeObjs["bottomDiv"].css({
				width : (evt.pageX - left) + "px"
			});
		},
		mouseup : function(evt) {
			$(document.body).unbind(".rightDiv");
			this.__resizeObjs["rightDiv"].unbind("mouseup");
			var left = $(this).offset().left;
			var width = $(this).width();
			var clientLeft = evt.pageX;
			if (left >= clientLeft) {
				return;
			}
			var newWidth = clientLeft - left;
			$(this).css({
				width : newWidth + "px"
			});
			this.__resizeObjs["rightTopDiv"].show();
			this.__resizeObjs["rightBottomDiv"].show();
			initUI.call(this, false);
		}
	};

	var bottomDiv = {
		mousedown : function(evt) {
			$(document.body).bind("mousemove.bottomDiv",
					bottomDiv.mousemove.bind(this));

			this.__resizeObjs["bottomDiv"].bind("mouseup.bottomDiv",
					bottomDiv.mouseup.bind(this));
			var offset = this.offset();
			this.__resizeObjs.orgincss = {
				top : offset.top,
				left : offset.left,
				height : this.height(),
				width : this.width()
			};
			this.__resizeObjs["leftBottomDiv"].hide();
			this.__resizeObjs["rightBottomDiv"].hide();
			evt.preventDefault();
		},
		mousemove : function(evt) {
			var top = this.__resizeObjs.orgincss.top;
			if (evt.pageY <= (top + this.__resizeObjs.minHeight)) {
				bottomDiv.mouseup.call(this,evt);// 出发鼠标up事件
				return;
			}
			this.__resizeObjs["bottomDiv"].css("top", (evt.pageY - top) + "px");

			this.__resizeObjs["leftDiv"].css({
				height : (evt.pageY - top) + "px"
			});
			this.__resizeObjs["rightDiv"].css({
				height : (evt.pageY - top) + "px"
			});
		},
		mouseup : function(evt) {
			$(document.body).unbind(".bottomDiv");
			this.__resizeObjs["bottomDiv"].unbind("mouseup");
			var top = $(this).offset().top;
			var clientTop = evt.pageY;
			if (top >= clientTop) {
				return;
			}
			var newHeight = clientTop - top;
			if (newHeight < this.__resizeObjs.newHeight) {
				newHeight = this.__resizeObjs.newHeight;
			}
			$(this).css({
				height : newHeight + "px"
			});
			this.__resizeObjs["leftBottomDiv"].show();
			this.__resizeObjs["rightBottomDiv"].show();
			initUI.call(this, false);
		}
	};

	var leftTopDiv = {
		mousedown : function(evt) {
			$(document.body).bind("mousemove.leftTopDiv",
					leftTopDiv.mousemove.bind(this));
			var offset = this.offset();
			this.__resizeObjs.orgincss = {
				top : offset.top,
				left : offset.left,
				height : this.height(),
				width : this.width()
			};
			this.__resizeObjs["leftTopDiv"].bind("mouseup.leftTopDiv",
					leftTopDiv.mouseup.bind(this));
			evt.preventDefault();
		},
		mousemove : function(evt) {
			var top = this.__resizeObjs.orgincss.top;
			var left = this.__resizeObjs.orgincss.left;
			var height = this.__resizeObjs.orgincss.height;
			var width = this.__resizeObjs.orgincss.width;
			var x = evt.pageX, y = evt.pageY;
			if(x >=(left + width -this.__resizeObjs.minWidth) || y>=(top +height -this.__resizeObjs.minHeight)){
				leftTopDiv.mouseup.call(this,evt);
				return;
			}
			this.__resizeObjs["leftTopDiv"].css({
				top : (y - top-5) + "px",
				left : (x - left-5) + "px"
			});
			this.__resizeObjs["topDiv"].css({
				width : (left - x+width) + "px",
				top : (y - top) + "px",
				left : (x - left) + "px"
			});
			this.__resizeObjs["leftDiv"].css({
				height : (top - y + height + 1) + "px",
				top : (y - top) + "px",
				left : (x - left) + "px"
			});
			this.__resizeObjs["rightDiv"].css({
				"height":(top - y + height +1)+"px",
				top : (y - top) + "px"
			});

			this.__resizeObjs["bottomDiv"].css({
				width : (left - x+width) + "px",
				left : (x - left) +"px"
			});
		},
		mouseup : function(evt) {
			$(document.body).unbind(".leftTopDiv");
			this.__resizeObjs["leftTopDiv"].unbind("mouseup");
			var top = this.__resizeObjs.orgincss.top;
			var left = this.__resizeObjs.orgincss.left;
			var height = this.__resizeObjs.orgincss.height;
			var width = this.__resizeObjs.orgincss.width;
			var x = evt.pageX, y = evt.pageY;
			var vgap = top  - y, hgap = left -x ;
			top = top - vgap;
			left = left - hgap;
			height = height +vgap;
			width = width +hgap;
			$(this).css({
				height : height + "px",
				width : width +"px",
				left : left +"px",
				top  : top +"px"
			});
			initUI.call(this);
		}

	};
	
	var leftBottomDiv = {
			mousedown : function(evt) {
				$(document.body).bind("mousemove.leftBottomDiv",
						leftBottomDiv.mousemove.bind(this));
				var offset = this.offset();
				this.__resizeObjs.orgincss = {
					top : offset.top,
					left : offset.left,
					height : this.height(),
					width : this.width()
				};
				this.__resizeObjs["leftBottomDiv"].bind("mouseup.leftBottomDiv",
						leftBottomDiv.mouseup.bind(this));
				evt.preventDefault();
			},
			mousemove : function(evt) {
				var top = this.__resizeObjs.orgincss.top;
				var left = this.__resizeObjs.orgincss.left;
				var height = this.__resizeObjs.orgincss.height;
				var width = this.__resizeObjs.orgincss.width;
				var x = evt.pageX, y = evt.pageY;
				if(y <=(top+this.__resizeObjs.minHeight) || x >= (width +left - this.__resizeObjs.minWidth)){
					leftBottomDiv.mouseup.call(this,evt);
					return ;
				}
				this.__resizeObjs["leftBottomDiv"].css({
					top : (y - top-5) + "px",
					left : (x - left-5) + "px"
				});
				this.__resizeObjs["topDiv"].css({
					width : (left - x+width) + "px",
					left : (x - left) + "px"
				});
				this.__resizeObjs["leftDiv"].css({
					height : (y - top) + "px",
					left : (x - left) + "px"
				});
				this.__resizeObjs["rightDiv"].css({
					height:(y - top)+"px",
				});

				this.__resizeObjs["bottomDiv"].css({
					width : (left - x+width) + "px",
					left : (x - left + 1) +"px",
					top : (y- top)+"px"
				});
			},
			mouseup : function(evt) {
				$(document.body).unbind(".leftBottomDiv");
				this.__resizeObjs["leftBottomDiv"].unbind("mouseup");
				var top = this.__resizeObjs.orgincss.top;
				var left = this.__resizeObjs.orgincss.left;
				var height = this.__resizeObjs.orgincss.height;
				var width = this.__resizeObjs.orgincss.width;
				var x = evt.pageX, y = evt.pageY;
				var vgap = y-top -height , hgap = left - x ;
				left = left - hgap;
				height = height +vgap;
				width = width +hgap;
				$(this).css({
					height : height + "px",
					width : width +"px",
					left : left +"px",
				});
				initUI.call(this);
			}

		};
	
	var rightTopDiv = {
			mousedown : function(evt) {
				$(document.body).bind("mousemove.rightTopDiv",
						rightTopDiv.mousemove.bind(this));
				var offset = this.offset();
				this.__resizeObjs.orgincss = {
					top : offset.top,
					left : offset.left,
					height : this.height(),
					width : this.width()
				};
				this.__resizeObjs["rightTopDiv"].bind("mouseup.rightTopDiv",
						rightTopDiv.mouseup.bind(this));
				evt.preventDefault();
			},
			mousemove : function(evt) {
				var top = this.__resizeObjs.orgincss.top;
				var left = this.__resizeObjs.orgincss.left;
				var height = this.__resizeObjs.orgincss.height;
				var width = this.__resizeObjs.orgincss.width;
				var x = evt.pageX, y = evt.pageY;
				if(y>= (top + height -this.__resizeObjs.minHeight) || x<=(left +this.__resizeObjs.minWidth)){
					rightTopDiv.mouseup.call(this,evt);
					return;
				}
				this.__resizeObjs["rightTopDiv"].css({
					top : (y - top - 5) + "px",
					left : (x - left-5) + "px"
				});
				this.__resizeObjs["topDiv"].css({
					width : (x-left) + "px",
					top : (y - top) + "px"
				});
				this.__resizeObjs["leftDiv"].css({
					height : (top - y + height) + "px",
					top : (y - top) + "px"
				});
				this.__resizeObjs["rightDiv"].css({
					height:(top - y + height)+"px",
					top : (y - top) + "px",
					left : (x - left)+"px"
				});

				this.__resizeObjs["bottomDiv"].css({
					width : (x-left) + "px",
				});
			},
			mouseup : function(evt) {
				$(document.body).unbind(".rightTopDiv");
				this.__resizeObjs["rightTopDiv"].unbind("mouseup");
				var top = this.__resizeObjs.orgincss.top;
				var left = this.__resizeObjs.orgincss.left;
				var height = this.__resizeObjs.orgincss.height;
				var width = this.__resizeObjs.orgincss.width;
				var x = evt.pageX, y = evt.pageY;
				var vgap = top - y , hgap = x - left - width;
				height = height +vgap;
				width = width +hgap;
				top = top - vgap ;
				$(this).css({
					height : height + "px",
					width : width +"px",
					top : top +"px"
				});
				initUI.call(this);
			}
		};
	
	var rightBottomDiv = {
			mousedown : function(evt) {
				$(document.body).bind("mousemove.rightBottomDiv",
						rightBottomDiv.mousemove.bind(this));
				var offset = this.offset();
				this.__resizeObjs.orgincss = {
					top : offset.top,
					left : offset.left,
					height : this.height(),
					width : this.width()
				};
				this.__resizeObjs["rightBottomDiv"].bind("mouseup.rightBottomDiv",
						rightBottomDiv.mouseup.bind(this));
				evt.preventDefault();
			},
			mousemove : function(evt) {
				var top = this.__resizeObjs.orgincss.top;
				var left = this.__resizeObjs.orgincss.left;
				var height = this.__resizeObjs.orgincss.height;
				var width = this.__resizeObjs.orgincss.width;
				var x = evt.pageX, y = evt.pageY;
				if(y <= (top + this.__resizeObjs.minHeight) || x<=(left +this.__resizeObjs.minWidth)){
					rightBottomDiv.mouseup.call(this,evt);
					return;
				}
				this.__resizeObjs["rightBottomDiv"].css({
					top : (y - top - 5) + "px",
					left : (x - left-5) + "px"
				});
				this.__resizeObjs["topDiv"].css({
					width : (x-left) + "px"
				});
				this.__resizeObjs["leftDiv"].css({
					height : (y - top) + "px",
				});
				this.__resizeObjs["rightDiv"].css({
					height:(y - top)+"px",
					left : (x - left)+"px"
				});

				this.__resizeObjs["bottomDiv"].css({
					width : (x-left) + "px",
					top : (y - top ) +"px"
				});
			},
			mouseup : function(evt) {
				$(document.body).unbind(".rightBottomDiv");
				this.__resizeObjs["rightBottomDiv"].unbind("mouseup");
				var top = this.__resizeObjs.orgincss.top;
				var left = this.__resizeObjs.orgincss.left;
				var height = this.__resizeObjs.orgincss.height;
				var width = this.__resizeObjs.orgincss.width;
				var x = evt.pageX, y = evt.pageY;
				var vgap = y- top -height , hgap = x - left - width;
				height = height +vgap;
				width = width +hgap;
				$(this).css({
					height : height + "px",
					width : width +"px",
				});
				initUI.call(this);
			}
		};

	function initEvents() {
		this.__resizeObjs.topDiv.bind("mousedown.topDiv", topDiv.mousedown
				.bind(this));
		this.__resizeObjs.leftDiv.bind("mousedown.leftDiv", leftDiv.mousedown
				.bind(this));
		this.__resizeObjs.rightDiv.bind("mousedown.rightDiv",
				rightDiv.mousedown.bind(this));
		this.__resizeObjs.bottomDiv.bind("mousedown.bottomDiv",
				bottomDiv.mousedown.bind(this));
		this.__resizeObjs.leftTopDiv.bind("mousedown.leftTopDiv",
				leftTopDiv.mousedown.bind(this));
		this.__resizeObjs.leftBottomDiv.bind("mousedown.leftBottomDiv",
				leftBottomDiv.mousedown.bind(this));
		this.__resizeObjs.rightTopDiv.bind("mousedown.rightTopDiv",
				rightTopDiv.mousedown.bind(this));
		this.__resizeObjs.rightBottomDiv.bind("mousedown.rightBottomDiv",
				rightBottomDiv.mousedown.bind(this));

	}

	$.fn.destoryResize = function() {
		if (this.__resizeObjs) {
			this.__resizeObjs["topDiv"].remove();
			this.__resizeObjs["leftDiv"].remove();
			this.__resizeObjs["rightDiv"].remove();
			this.__resizeObjs["bottomDiv"].remove();
			this.__resizeObjs["topDiv"] = null;
			this.__resizeObjs["leftDiv"] = null;
			this.__resizeObjs["rightDiv"] = null;
			this.__resizeObjs["bottomDiv"] = null;
			if (this.__resizeObjs.clone) {
				this.__resizeObjs.clone.remove();
				this.__resizeObjs.clone = null;
			}
			this.__resizeObjs = null;
		}
	};
})($);